<template>
    <div id="introduced">
      <!--轮播-->
      <div class="swiper">
        <swiper indicator-dots="true" indicator-color="#a7a7a7" indicator-active-color="#57d9bf" autoplay="true" interval="5000" duration="500">
          <block v-for="(item,index) in businessLis" :key="index">
            <swiper-item @click="goIntroduces(index)">
              <image v-bind:src="item.img" class="slide-image"/>
            </swiper-item>
          </block>
        </swiper>
      </div>
      <!--商家详情-->
      <p class="shopName">{{currentContent.name}}</p>
      <p class="shopInfo">{{currentContent.briefly}}</p>
      <!--地址-->
      <div class="address">
        <div @click="map()" class="map">
          <img src="../../../../static/images/icon/icon-map.png" mode="aspectFit">
          <p>{{currentContent.address}}</p>
        </div>
        <img @click="phoneCall()" src="../../../../static/images/icon/icon-iphone.png" class="call"  mode="aspectFit">
      </div>
      <!--套餐-->
      <div class="meal" v-bind:style="{height:height}">
        <div class="mealTil">
          <img src="../../../../static/images/mealTil.png" alt="meal">
        </div>
        <div v-for="(item, index) in businessLis" :key="index" @click="goodsDetails( '', item.id)">
          <minArea :businessImg="item.img" :name="item.name" :briefly="item.briefly" :money="item.money"></minArea>
        </div>
      </div>
      <div class="more" @click="showMore()">
        <p>查看其它<span>{{moreMeal}}</span>个套餐</p>
        <img src="../../../../static/images/moreMeal.png" alt="more" mode="aspectFit">
      </div>
      <!--商家介绍-->
      <div class="shopDetails">
        <div class="detailTil">
          <img src="../../../../static/images/detailTil.png" alt="">
        </div>
        <p class="tl">欢迎来到布后.何去慢生活空间—— 一个养心养身的小院。希望您能喜欢这里远离喧嚣的宁静；喜欢被三面荷塘环绕和比邻的小河； 喜欢不远处时不时驶过的火车以及那翱翔的只只白鹭，喜欢如此浑然天成的乡间野趣。</p>
        <p class="tl">也许您我早已熟悉，更多可能我们还未曾谋面，期待有缘成为朋友。</p>
        <img src="../../../../static/images/business/business-10.jpg" alt="">
        <p class="tl">布后.何去慢生活空间以“七星伴月”为建筑格局，力图营造一种安逸、闲适、清雅的格调——石瓦墙、茅草顶、木格亭、会随季节变化的亚麻绳等等，都是运用接近自然元素的材料建造，这也是与布后.何去的生活理念遥相呼应</p>
        <img src="../../../../static/images/business/business-11.jpg" alt="">
        <p class="tc">落英夹道</p>
        <p class="tc">7个大小不一的主题茅亭</p>
        <p class="tc">品、悟、享、乐、荷欢、荷趣、荷韵</p>
        <p class="tc">还有2间川西风格的瓦房坐于莲上</p>
        <p class="tc">每个包间独具特点</p>
        <img src="../../../../static/images/business/business-12.jpg" alt="">
        <p class="tl">布后.何去慢生活空间以“七星伴月”为建筑格局，力图营造一种安逸、闲适、清雅的格调——石瓦墙、茅草顶、木格亭、会随季节变化的亚麻绳等等，都是运用接近自然元素的材料建造，这也是与布后.何去的生活理念遥相呼</p>
      </div>
      <!--版权-->
      <div class="copyRight">
        <p>找玩网</p>
        <p>五朵云.休闲农旅全场景运营服务商 版权所有</p>
      </div>
    </div>
</template>

<script>
  import minArea from '../../../components/minArea'
export default {
  data () {
    return {
      businessLis: this.$store.state.businessLis,
      currentContent: {},
      height:'676rpx',
      rotates:false,
      animationData: {},
      moreMeal:'1',
      indicatorDots: true,
      indicatorColor:'',
      indicatorActiveColor:'',
      autoplay: true,
      interval: 5000,
      duration: 500,
      business: {
        iphone: "13558767653",
        latitude: 30.540213,
        longitude: 104.103219,
        scale: 15,
        name: '新怡华庭-东区',
        address: '金平区长平路93号'
      }
    }
  },
  components: {
    minArea,
  },
  methods: {
    goIntroduces: function (index) {
      wx.navigateTo({
        url: '/pages/hot/introduced/main?index='+index,
      });
    },
    goodsDetails: function(type, urlId,) {
      wx.navigateTo({
        url: '/pages/hot/goods/main?type='+type+"&urlId="+urlId,
      });
    },
    map: function () {
      wx.openLocation({
        latitude: this.currentContent.latitude,
        longitude: this.currentContent.longitude,
        scale: 15,
        name: this.currentContent.name,
        address: this.currentContent.address,
      })
    },
    phoneCall: function () {
      wx.makePhoneCall({
        phoneNumber: this.currentContent.iphone,
        success: function () {
          console.log("拨打电话成功！")
        },
        fail: function () {
          console.log("拨打电话失败！")
        }
      })
    },
    showMore: function() {
      this.height = 'auto';
      this.rotates = true;
    },

  },
  computed: {

  },
  onLoad: function (option) {
    var id = option.id;
    for (var k = 0, length = this.$store.state.order.length; k < length; k++) {
      if(this.$store.state.order[k].type == id) {
        this.currentContent = this.$store.state.order[k];
        return;
      }
    }
  },
  created() {

  }
}
</script>

<style scoped lang=scss>
  #introduced{
    border-top: 9rpx solid #f5f5f5;
  }
  .swiper{
    height: 400rpx;
    width: 100%;
    background: #f5f5f5;
    overflow: hidden;
    swiper{
      height: 400rpx;
    }
    .slide-image{
      width: 100%;
      height: 100%;
    }
  }

  .shopName{
    color: #333333;
    font-size: 30rpx;
    height: 103rpx;
    margin: 0 20rpx;
    line-height: 103rpx;
  }
  .shopInfo{
    font-size: 24rpx;
    color: #919191;
    margin: 0 20rpx;
    line-height: 34rpx;
  }

  .address{
    height: 104rpx;
    margin: 32rpx 20rpx 0 20rpx;
    border-top: 1rpx solid #e6e6e6;
    .map{
      width: 600rpx;
      border-right: 1rpx solid #57d9bf;
      height: 40rpx;
      float: left;
      margin-top: 30rpx;
      img{
        float: left;
        width: 30rpx;
        height: 34rpx;
      }
      p{
        color: #919191;
        font-size: 26rpx;
        margin-left: 15rpx;
        width: 506rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
        float: left;
      }
    }
    .call{
      float: right;
      width: 37rpx;
      height: 33rpx;
      margin-top: 31rpx;
    }
  }

  .meal{
    border-top: 19rpx solid #f5f5f5;
    padding-top: 15rpx;
    overflow: hidden;
    .mealTil{
      height: 104rpx;
      margin: 0 20rpx;
      overflow: hidden;
      border-bottom: 1rpx solid #cacaca;
      img{
        width: 148rpx;
        margin-top: 16rpx;
        height: 62rpx;
      }
    }
  }
  .more{
    margin: 20rpx;
    height: 104rpx;
    font-size: 28rpx;
    color: #999999;
    border-top: 1rpx solid #cacaca;
    p{
      float: left;
      margin-left: 215rpx;
      margin-top: 40rpx;
    }
    img{
      float: left;
      width: 29rpx;
      height: 16rpx;
      margin-left: 20rpx;
      margin-top: 51rpx;
    }
  }

  .shopDetails{
    border-top: 19rpx solid #f5f5f5;
    background: #ffffff;
    overflow: hidden;
    text-align: center;
    .detailTil{
      height: 104rpx;
      margin: 0 20rpx;
      line-height: 104rpx;
      text-align: center;
      border-bottom: 1rpx solid #e6e6e6;
      img{
        width: 240rpx;
        height: 37rpx;
      }
    }
    p{
      margin: 40rpx 25rpx 0 25rpx;
      color: #666666;
      text-indent: 50rpx;
      font-size: 28rpx;
      line-height: 42rpx;
    }
    .tl{
      text-align: left;
    }
    .tc{
      text-align: center;
      margin: 20rpx 25rpx 0 25rpx;
    }
    img{
      margin: 40rpx 25rpx 0 25rpx;
    }
  }

  .copyRight{
    text-align: center;
    font-size: 24rpx;
    color: #999999;
    padding: 35rpx 0;
    background: #f5f5f5;
    margin-top: 35rpx;
    p{
      height: 46rpx;
      line-height: 46rpx;
    }
  }
</style>
